<template>
    <el-container class="con">
        <el-aside :class="asideShow">
            <leftNav></leftNav>
        </el-aside>
        <el-container>
            <el-header>
                <navCon></navCon>
            </el-header>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import leftNav from '@/components/leftNav.vue';
import navCon from '@/components/navCon.vue';
export default {
    name:'index',
    components:{
        leftNav,
        navCon
    },
    data(){
        return {
            asideShow: 'asideBig'
        }
    },
    created(){
        this.$bus.$on("toggle",(value)=>{
            if(value) {
                this.asideShow = 'aside'
            } else {
                setTimeout(() => {
                    this.asideShow = 'asideBig'
                }, 100);
            }
        })
    }
}
</script>

<style scoped>
   .el-header{
    background-color: #B3C0D1;
    line-height: 60px;
    padding: 0!important;
  }
  
  .el-aside {
    background-color: #334157;
    height: 100%;
    border: none
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  .con {
    width: 100%;
    height: 100%;
  }
  .aside{
    width: 64px!important;
    height: 100%;
  }
  .asideBig {
    width: 240px!important;
    height: 100%;
  }
</style>
